<template>
  <div>
    <bread>
      <h1>科研巡视</h1>
    </bread>
    <page-content isCard>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="college-card">
            <p class="college-zh two-line">微电子与纳电子系微电子与纳电子系微电子与纳电子系微电子与纳电子系</p>
            <p class="college-en two-line">Department of Microelectronics and Nanoelectronics & Institute of Microelectronic</p>
            <el-button type="text" class="go-college">
              <a href="/index/over-view/home" target="_blank">进入学院</a>
            </el-button>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="college-card">
            <p class="college-zh two-line">微电子与纳电子系微电子与纳电子系微电子与纳电子系微电子与纳电子系</p>
            <p class="college-en two-line">Department of Microelectronics and Nanoelectronics & Institute of Microelectronic</p>
            <el-button type="text" class="go-college">
              <a href="/index/over-view/home" target="_blank" @click.prevent="goCollege">进入学院</a>
            </el-button>
          </el-card>
        </el-col>
        </el-row>
    </page-content>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      goCollege() {
        let time = 3;
          this.$confirm('将在新窗口为您打开 XXXXXXXXXXX学院 学院管理端', '正在前往【XXXXX学院】', {
            confirmButtonText: `${time}...`,
            showCancelButton: false,
            closeOnClickModal: false,
            closeOnPressEscape: false,
            customClass: 'switch-identity',
            type: '',
            beforeClose: function (action, instance, done) {
              clearInterval(timer);
              done();
            },
          }).then(() => {
            clearInterval(timer);
            location.href = location.href;
          })
          .catch(() => {});

          const timer = setInterval(() => {
            time--;
            console.log(time);
            jQuery('.switch-identity .el-button--primary span').html(`${time}...`)
            if (time == 0) {
              clearInterval(timer);
              location.href = '/index/research-inspection/home';
            }
          }, 1000);
      }
    }
  }
</script>
<style scoped lang="scss">
  .content-page {
    .el-row {
      .el-col {
        margin-bottom: 20px;
      }
    }
  }
  .college-card {
    height: 196px;
    position: relative;
  }
  .college-zh {
    font-size: 26px;
    color: #1F2D3D;
  }
  .college-en {
    font-size: 12px;
  }
  .go-college {
    position: absolute;
    bottom: 5px;
  }
</style>
<style lang="scss">
  .switch-identity {
    .el-message-box__content {
      min-height: 80px;
      padding: 20px 15px;
    }
  }
</style>
